<template>
  <div class="profile-page">
    <div v-if="!user.isLoggedIn" class="not-logged-in">
      <h2>请先登录</h2>
      <p>登录后可以查看个人中心和管理发布的商品</p>
      <router-link to="/login" class="btn btn-primary">立即登录</router-link>
    </div>
    
    <div v-else>
      <h1 class="section-title">个人中心</h1>
      
      <div class="profile-card">
        <div class="profile-header">
          <div class="avatar">{{ avatarChar }}</div>
          <div class="user-info">
            <h2>{{ user.name }}</h2>
            <p>{{ user.college }}</p>
          </div>
        </div>
        
        <div class="profile-stats">
          <div class="stat-item">
            <div class="stat-value">{{ user.itemsPosted }}</div>
            <div class="stat-label">发布商品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ user.itemsSold }}</div>
            <div class="stat-label">卖出商品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ user.rating }}</div>
            <div class="stat-label">信用评分</div>
          </div>
        </div>
      </div>
      
      <div class="my-items">
        <h2 class="section-title">我发布的商品</h2>
        <div v-if="myItems.length > 0" class="grid-container">
          <ItemCard 
            v-for="item in myItems" 
            :key="item.id" 
            :item="item"
            @click="$router.push({ name: 'item-detail', params: { id: item.id } })"
          />
        </div>
        <div v-else class="no-items">
          <p>您还没有发布任何商品</p>
          <router-link to="/publish" class="btn btn-secondary">去发布商品</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { inject, computed } from 'vue'
import ItemCard from './ItemCard.vue'

export default {
  components: { ItemCard },
  setup() {
    // 使用注入获取用户对象
    const user = inject('user')
    const items = inject('items')
    // 生成头像字符（姓氏的第一个字符）
    const avatarChar = computed(() => {
      return user.name ? user.name.charAt(0) : '👤'
    })
    
    const myItems = computed(() => {
      return items.value.filter(item => item.seller === user.name)
    })

    return {
      user,
      avatarChar,
      myItems
    }
  }
}
</script>

<style scoped>
.not-logged-in {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  max-width: 600px;
  margin: 40px auto;
}

.not-logged-in h2 {
  color: var(--primary-color);
  margin-bottom: 15px;
}

.not-logged-in p {
  color: var(--gray-color);
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.no-items {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.no-items p {
  margin-bottom: 20px;
  color: var(--gray-color);
  font-size: 1.1rem;
}

.profile-card {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 25px;
  margin-bottom: 40px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.avatar {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
  margin-right: 20px;
}

.user-info h2 {
  color: var(--primary-color);
  margin-bottom: 5px;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--secondary-color);
}

.stat-label {
  color: var(--gray-color);
  font-size: 0.9rem;
}
</style>